<template>
	<view class="">

		<view class="Items">
			<text class="titles">开工时间</text>
			<view class="inputDiv" @tap="showpickerChage(2)">
				<input class="inputClass" :disabled="true" type="text" v-model="starTime" />
			</view>
		</view>

		<view class="Items">
			<text class="titles">完成时间</text>
			<view class="inputDiv" @tap="showpickerChage(3)">
				<input class="inputClass" :disabled="true" type="text" v-model="endTime" />
			</view>
		</view>

		<view class="Items">
			<text class="titles">合格数量</text>
			<view class="inputDiv">
				<input class="inputClass" type="number" v-model="hgNum" />
			</view>
		</view>

		<view class="Items">
			<text class="titles">报废数量</text>
			<view class="inputDiv">
				<input class="inputClass" type="number" v-model="bfNum" />
			</view>
		</view>

		<view class="Items">
			<text class="titles">返工数量</text>
			<view class="inputDiv">
				<input class="inputClass" type="number" v-model="fgNum" />
			</view>
		</view>


		<view hover-class="jsShow" class="jsBtns" @tap="addCar">提交</view>




		<!--遮罩层-->
		<view class="zzc" @tap="showPicker=false" :class="showPicker==false?'zzcHide':''"></view>
		<!--选择器-->
		<view class="showPickerDiv" :class="showPicker==true?'showSixH':''">
			<view class="myButtom">
				<text @tap="showPicker=false">取消</text>
				<text>请选择</text>
				<text @tap="yesTap">确认</text>
			</view>

			<picker-view class="sixDiv" v-if="showPicker" @change="pickerChange" :value="value">
				<picker-view-column>
					<view class="sixDivitem" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="sixDivitem" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					<view class="sixDivitem" v-for="(item,index) in days" :key="index">{{item}}日</view>
				</picker-view-column>
				<picker-view-column>
					<view class="sixDivitem" v-for="(item,index) in hours" :key="index">{{item}}时</view>
				</picker-view-column>
				<picker-view-column>
					<view class="sixDivitem" v-for="(item,index) in minutes" :key="index">{{item}}分</view>
				</picker-view-column>
			</picker-view>


		</view>



	</view>
</template>

<script>
	import {
		createCardDetail
	} from '@/common/api/table.js'
	export default {
		data() {
			return {
				showPicker: false,
				years:[],
				year:'',
				months:[],
				month:'',
				days:[],
				day:'',
				hours:[],
				hour:'',
				minutes:[],
				minute:'',
				value: [],
				starTime: '',
				endTime: '',
				hgNum: '',
				bfNum: '',
				fgNum: '',
				pickerIndex: 0,
                details:null,
			}
		},
		onShow() {
			this.getDate();
			//默认今天的时间
			let time = this.year + '-' + this.month + '-' + this.day +  ' ' + this.hour + ':' + this.minute ;
			this.starTime = time;
			this.endTime = time;
		},

		onLoad(e) {
			if ('obj' in e) {
				let obj = JSON.parse(e.obj);
				this.details = obj
			}
		},
		

		methods: {

			getDate() {
				const date = new Date()
				const years = []
				const year = date.getFullYear()
				const months = []
				const month = date.getMonth() + 1
				const days = []
				const day = date.getDate()
				const hours = []
				const hour = date.getHours()
				const minutes = []
				const minute = date.getMinutes()
				for (let i = 1990; i <= date.getFullYear(); i++) {
					years.push(i)
				}
				for (let i = 1; i <= date.getMonth() + 1; i++) {
					months.push(i)
				}
				const newDate = new Date(year, month - 1, 32); // 根据月份设置日期
				const timeDay = 32 - newDate.getDate(); // 根据设置的日期来获取当前月份的天数。
				for (let i = 1; i <= date.getDate(); i++) {
					days.push(i)
				}
				for (let i = 0; i <= date.getHours(); i++) {
					hours.push(i)
				}
				for (let i = 0; i <= date.getMinutes(); i++) {
					minutes.push(i)
				}
				this.years = years;
				this.months = months;
				this.days = days;
				this.hours = hours;
				this.minutes = minutes;
				this.year = year;
				this.month = month;
				this.day = day;
				this.hour = hour;
				this.minute = minute;
				this.value = [9999, month - 1, day - 1, hour, minute];
			},

			addCar() {
				if (!this.hgNum) {
					uni.showToast({
						icon: 'none',
						title: '请填写合格数量'
					});
					return;
				} else {
					if (this.hgNum.indexOf(".") > 0) {
						uni.showToast({
							icon: 'none',
							title: '请填写有效的合格数量'
						});
						return;
					}
				}

				if (!this.bfNum) {
					uni.showToast({
						icon: 'none',
						title: '请填写报废数量'
					})
					return;
				} else {
					if (this.bfNum.indexOf(".") > 0) {
						uni.showToast({
							icon: 'none',
							title: '请填写有效报废的数量'
						})
						return;
					}
				};

				if (!this.fgNum) {
					uni.showToast({
						icon: 'none',
						title: '请填写返工数量'
					});
					return;
				} else {
					if (this.fgNum.indexOf(".") > 0) {
						uni.showToast({
							icon: 'none',
							title: '请填写有效的返工数量'
						});
						return;
					}
				};
				
				this.details.qualifiedQuantity = this.hgNum;
				this.details.reworkQuantity = this.fgNum;
				this.details.unqualifiedQuantity = this.bfNum;
				this.details.workBeginTime = this.starTime;
				this.details.workEndTime = this.endTime;
				
				createCardDetail(this.details)
					.then(res => {
						console.log("工序汇报", res)
					})

			},

			//点击确定修改
			yesTap() {
				let time = this.year + '-' + this.month + '-' + this.day +  ' ' + this.hour + ':' + this.minute ;
				if (this.pickerIndex == 2) {
					this.starTime = time;
				} else if (this.pickerIndex == 3) {
					this.endTime = time;
				}
				this.showPicker = !this.showPicker;
			},

			pickerChange(e) {
				//生日选择器时，切换年份月份时，动态更改当月天数
				let val = e.detail.value; 
				this.year = this.years[val[0]];
				this.month = this.months[val[1]];
				this.day = this.days[val[2]];
				this.hour = this.hours[val[3]];
				this.minute = this.minutes[val[4]]; 
				var newDate = new Date(this.year, this.month - 1, 32);
				var day = 32 - newDate.getDate();
				this.days = [];
				for (let i = 1; i <= day; i++) {
					this.days.push(i)
				}
			},

			showpickerChage(index) {
				this.pickerIndex = index;
				this.getDate();
				this.showPicker = true;
			},
		}
	}
</script>

<style scoped lang="scss">
	.sixDivitem {
		text-align: center;
		line-height: 68rpx;
	}

	.zzc {
		width: 100%;
		height: 100%;
		display: block;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0rpx;
		z-index: 20;
		transition: all 2s;
	}

	.zzcHide {
		display: none !important;
	}

	.sixDiv {
		width: 750rpx;
		height: 400rpx;
		background-color: #f8f8f8;
		text-align: center;
	}

	.myButtom {
		width: 750rpx;
		display: flex;
		justify-content: space-around;
		height: 100rpx;
		align-items: center;
	}

	.showSixH {
		height: 500rpx !important;
	}

	.showPickerDiv {
		position: fixed;
		bottom: 0rpx;
		height: 0rpx;
		transition: height 0.5s;
		background-color: white;
		z-index: 999;
	}




	.Items {
		margin-top: 50rpx;
		width: 750rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: center;

		.titles:before {
			content: '* ';
			color: red;
		}

		.titles {
			font-size: 30rpx;
			width: 150rpx;
			text-align: center;
		}

		.inputDiv {
			width: 500rpx;
			height: 80rpx;
			margin-left: 20rpx;
			border: 2rpx solid #C0C0C0;
			border-radius: 15rpx;
			display: flex;
			align-items: center;

			.inputClass {
				width: 400rpx;
				height: 80rpx;
				margin-left: 20rpx;
			}

		}
	}


	.jsBtns {
		width: 600rpx;
		height: 80rpx;
		border-radius: 15rpx;
		color: white;
		background-color: #007AFF;
		text-align: center;
		line-height: 80rpx;
		letter-spacing: 10rpx;
		font-size: 40rpx;
		margin: 100rpx auto 0;
	}

	.jsShow {
		background-color: #131eff;
	}
</style>
